<script setup name="ChargingItemForm">
import { ref,onMounted } from "vue";
import { Search } from '@element-plus/icons-vue';

import {selectData1,saveData1,dataSourceTableConst,
        insertFun,tableRef,updateFun,cellClick,
        cellClickConst,deleteFun,biaoshi} 
from "@/utils/InsertDeleteSelectUpdate";

const form=ref({region:''});
const select1=()=>{
    selectData1('100145',{'bh':''},"");
}
const insert1=()=>{

  const insertObj={
  dybl:"1",
  dybl1:"77",
  dydw:"77",
  dydw1:"77",
  dyz:"123",
  hisbm:"人",
  hisdw:"77",
  hismc:"77",
  jm:"",
  lb:"1",
  saveflag: 1 
};
   
  insertObj.lb=buttonVlbConst.value;
  insertFun(insertObj,'jm');
}
const update1=(row ,i)=>{
    updateFun(row,i)
}
const save1=()=>{
    saveData1('100155');
    select1();
}
const delete1=()=>{
    deleteFun();
}


onMounted(()=>{
    select1();
});
</script>

<template>
<div class="main-content">
    <div class="main-content-case">
        <div class="main-content-title">
            <div class="admin-case-top">
            <div style="font-size: 14px; color: #333333">名称</div>
            </div>
            <el-input v-model="form.region" style="width: 180px;margin-left: 8px;"/>
            <el-button type="primary" :icon="Search" style="width:72px;margin-left: 16px;" @click="">查询</el-button>        
               
        </div>
        <div class="main-content-line"> 

        </div>

        <div class="main-content-right-button">
          <div class="button-case">
              <div class="button-case-box " @click="insert1()">
            <img
              src="../../../assets/images/add_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>新增</div>
              </div>

              <div class="button-case-box " @click="delete1()" >
                <img
                src="../../../assets/images/del_icon.png"
                style="width: 16px; height: 16px; margin-right: 2px"
                alt=""
                srcset=""
                />
                <div> {{cellClickConst}}</div>  
              </div>

              <div class="button-case-box"  > 
                <img
                    src="../../../assets/images/save_icon.png"
                    style="width: 16px; height: 16px; margin-right: 2px"
                    alt=""
                    srcset=""
                    />
                <el-popconfirm title="确认保存吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="save1()"
                @cancel="cancelEvent"
                >
                <template #reference>
                    <div>保存</div>
                </template>
                </el-popconfirm>   
              </div>   
              <div class="button-case-box " @click="select1()">
            <img
              src="../../../assets/images/replace_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>刷新</div>
              </div>
          </div>
        </div>
        <div class="main-content-table">
            <vxe-table
                ref="tableRef"
                border
                :columnConfig="{resizable: true}"
                :row-config="{isCurrent:true,isHover:true}"
                :edit-config="{mode: 'cell',  trigger: 'click',showIcon:false}"
                :data="dataSourceTableConst"
                height= auto
                :scroll-y="{enabled: true, gt: 0}"  
                show-overflow
                @editActivated="(row) => update1(row,1)"   
                @edit-closed="(row) => update1(row,2)"   
                @cell-click="(row) => update1(row,3)"   
                >
            <vxe-column type="seq" width="60"> 
            </vxe-column>
            <vxe-column field="saveflag" title="标识" width="60">
              <template  #default="{ row }">
                <div style="color: red;"> {{biaoshi(row.saveflag)}} </div>
              </template>
            </vxe-column>
            <vxe-column field='lb'  title='编号'   width=100   :edit-render="{}">
            </vxe-column>
             <vxe-column field='jm'     title='说明'      width=100   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='hisbm'   title='验证对象'      width=80   :edit-render="{ }">
            </vxe-column>
            <vxe-column field='hismc'   title='关联病历类型'      width=200   :edit-render="{ }">
            </vxe-column>
            <vxe-column field='hisdw'   title='关联病历id'      width=100   :edit-render="{ }">
            </vxe-column>
            <vxe-column field='dybl'     title='关联类别'      width=80   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='dyz'     title='his关联值'      width=100   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='lb'     title='材料关联值'      width=120   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='dybl1'     title='抗生素关联值'      width=200   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='dydw1'     title='药品关联值'      width=200   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='dydw1'     title='诊疗关联值'      width=200   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='dydw1'     title='关联验证类别'      width=200   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='dydw1'     title='关联病历内容'      width=120   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='dydw1'     title='门诊住院类别'      width=120   :edit-render="{name: 'input'}">
            </vxe-column>
            </vxe-table> 
        </div>





                   
      
        
    </div>
</div>


</template>

<style lang="scss" scoped>
 
.main-content{
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #f7f7f7;

  .main-content-case{
    width: 100%;
    height: 100%;
    background:#fff;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    .main-content-title{
        height: 32px;
        width: 100%;
        display: flex;
        margin-bottom: 16px;
         
        .admin-case-top {
            display: flex;
            align-items: center;
            margin-right: 16px;
  
    }


        
    }
    .main-content-line{
        height: 1px;
        width: 100%;
        border: 1px solid #EBEBEB;
    }
    .main-content-right-button{
            height: 20px;
            width: 100%;
            margin-bottom: 16px;
            margin-top: 16px;
            .button-case{
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #333333;
                
                height: 100%;
                .button-case-box {
                    display: flex;
                    align-items: center;
                    margin-right: 12px;
                    cursor: pointer; /* 可选：使光标变为指针，表示可点击 */
                   
                     
                }
    }
    }
    .main-content-table{

        width: 100%;
        height: calc(100% - 85px);
         
    }
  }


}
.xpFont{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
.xpFontText-align{
  text-align: left;
}
.xpFontColor{
    color: #333333;
}
</style>